@font-face {
	font-family: 'MatterSQ-Light';
	src: url('./fonts/MatterSQ-Light.d3489540.ttf') format('truetype');
}

@font-face {
	font-family: 'MatterSQ-Medium';
	src: url('./fonts/MatterSQ-Medium.07b9ef6f.ttf') format('truetype');
}

@font-face {
	font-family: 'MatterSQ-Regular';
	src: url('./fonts/MatterSQ-Regular.3e4f6a24.ttf') format('truetype');
}

@font-face {
	font-family: 'MatterSQ-SemiBold';
	src: url('./fonts/MatterSQ-SemiBold.2a0fe0c8.ttf') format('truetype');
}
body {
    font-family: MatterSQ-Light;
}
header {
	background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 999;
	border-bottom: 1px solid #e9e9e9;

	.header-main {
		
		height: 88px;
		margin: 0px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		nav {
			ul {
				display: flex;
				align-items: center;
				height: 100%;
				margin: 0px;

				li {
					width: 7.5625rem;
					height: 3rem;
					line-height: 3rem;
					border-radius: 8px;
					text-align: center;

					&+li {
						margin-left: 15px;
					}

					&.active {
						background: linear-gradient(90deg, #3c72fc -10.59%, #00060c 300.59%);
					}

					&:hover {
						background: linear-gradient(90deg, #3c72fc -10.59%, #00060c 300.59%);
					}

					a {
						color: #fff;
						text-decoration: none;
						font-size: 1.5rem;
						font-family: 'MatterSQ-Regular', sans-serif;
					}
				}
			}
		}

		.dropdown {
			.lang {
				font-size: 1.5rem;
				color: #fff;
				cursor: pointer;
			}
		}
	}
}

footer {
	background-color: #0f0d1d;
	.footer-container {
		display: flex;
		flex-direction: column;
		padding: 30px 10%;
		justify-content: center;
		background: url(../resoures/images/footer_bg.png) no-repeat;
		background-size: 100% 100%;
		.logo {
			text-align: center;
		}
		ul {
			margin: 25px 0px;
			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				& + li {
					margin-top: 12px;
				}
				h2 {
					flex: 1;
					color: #fff;
					margin: 0px;
				}
				p {
					flex: 1;
					margin: 0;
					margin-left: 12px;
					color: #cacbd0;
				}
			}
		}
		.brand-logo {
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			a {
				display: block;
				width: 36px;
				height: 36px;
				border: 1px solid #a6a7a9;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				& + a {
					margin-left: 20px;
				}
				img {
					width: 18px;
					height: 18px;
				}
			}
		}
	}
}